<!DOCTYPE html>
<html lang="en">
<head id="head1">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body id="body">
<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaMe</p>
</div>
<script>
    var js = document.getElementById("js");//已有元素
    var list = document.getElementById("list");
    list.appendChild(js)//挪动已有元素位置

    //新建p标签 <p></p>
    var newp = document.createElement("p");
    //给p标签赋值id，<p id="newp"></p>
    newp.id = "newp";
    //给这个p标签赋值文本
    newp.innerText='Hello World';
    //作为子节点插入父节点下
    list.appendChild(newp);
    //创建一个自定义标签节点
    var link = document.createElement("link");
    //给自定义标签设置属性，也可以给已有标签设置属性，但是不能给一类标签赋值
    //一切class和标签种类定义的对象，在js里都不能直接操作
    //如果需要操作，需要进行遍历，对每一个成员都进行一遍操作
    link.setAttribute('rel', "stylesheet");
    link.setAttribute('href', "css/style.css");

    var head1 = document.getElementById("head1");
    //插入到head节点下
    head1.appendChild(link);

    var body = document.getElementById("body");
    body.setAttribute('style', 'background-color:black');

    //尽管通过TagName/ClassName赋值的对象无法在js里直接操作
    //但是可以直接不赋值对象，直接操作head和body
    document.body.setAttribute('style', 'background-color:blue');
</script>
</body>
</html>